<template>
	<view class="page">
		<headnav leftText="个人资料"></headnav>
		<view class="pageBox">
			<view class="block dls">
				<view class="head">
					<image :src="userInfo.avatar" mode="" class="headImg"></image>		
				</view>
				 <view class="dl">
					 <view class="dt">姓名</view>
					 <view class="dd">{{userInfo.student_name}}</view>
				 </view>
				 <view class="dl">
					 <view class="dt">地区</view>
					 <view class="dd">湖北省{{userInfo.city_name}}</view>
				 </view>
				 <view class="dl">
						 <view class="dt">学校</view>
						 <view class="dd">{{userInfo.school_name}}</view>
				 </view>
				 <view class="dl">
						 <view class="dt">学院</view>
						 <view class="dd">{{userInfo.school_college_name}}</view>
				 </view>
				 <view class="dl">
						 <view class="dt">入学年级</view>
						 <view class="dd">{{userInfo.start_year}}</view>
				 </view>
				 <view class="dl">
						 <view class="dt">班级</view>
						 <view class="dd">{{userInfo.class_name}}</view>
				 </view>
			</view>
		</view>
		<view class="bottoBt">
			<view class="bt bt-a" @tap="goEditor">编辑</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" :showClose='false' cancelText="关闭" confirmText="关闭" title="抱歉" content="欢迎使用 uni-popup!" @confirm="dialogConfirm"
				@close="dialogClose">
				<view class="errimgBox">
					<image src="/static/img/err.png" class="errImg" mode=""></image>
					<view style="color:#a6a6a6;width: 100%;text-align: center;padding-top: 20rpx;">订单未完成，无法修改资料</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapGetters } from "vuex";
	export default {
		data() { 
			return {
			
			}
		},
		onLoad() {
			console.log('onLoad',this.user);
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			goEditor() {
				this.$Router.push('/pages/changeUser/changeUser')
			},
			change(e) {
				this.swiper.current = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">
   .page {
   		background-color: #f5f8fa;
   		width: 100%;
   		height: 100%;
   	}
	.errimgBox {
		width: 100%;
	}
	.errImg {
		display: block;
		width: 132rpx;
		height: 132rpx;
		margin: 15rpx auto;
	}
	.head {
		height: 110rpx;
		position: relative;
	}
	.headImg {
		width: 180rpx;
		height: 180rpx;
		padding: 25rpx;
		background-color: #fff;
		position: absolute;
		left:280rpx;
		border-radius: 50%;
		margin-left: -90rpx;
		top: -111rpx;
	}
   	.dls-h {
   		background-color: #fff;
   		padding: 37rpx 37rpx 27rpx;
   		border-radius: 26rpx;
   		margin-bottom: 20rpx;
   		.good-item {
   			margin-bottom: 10rpx;
   		}
   		.dls-h-t {
   		  font-size: 28rpx;
   		  margin-bottom: 20rpx;
   		}
   		.h-t-info {
   			display: flex;
   			justify-content: space-between;
   			.h-t-r {
   				color:#ff4f4f;
   			}
   		}
   	}
	.pageBox {
		padding-top: 130rpx;
	}
	.dls{
		background-color: #fff;
		border-radius: 26rpx;
	    padding:  0 40rpx;
		margin-bottom: 30rpx;
		.dl {
			border-bottom: 1px solid #f5f5f5;
			display: flex;
			justify-content: space-between;
			&:last-of-type {
				border-bottom: none;
			}
			.dt, .dd {
				height: 100rpx;
				line-height: 100rpx;
				font-size: 30rpx;
			}
		}
	}
	.bottoBt {
		padding-top: 155rpx;
		justify-content: center !important;
		@include bt-s-2();
	}
</style>
